<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        body {
            background-image: url('https://tx-free-imgs.acfun.cn/o_1dsbrgspq1co71qmok1c1ed51thq0.jpeg');
            background-size: 100% 100%;
        }

        .mask {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .mask section {
            width: 280px;
            height: 160px;
            background-color: white;
            border-radius: 10px;
            font-size: 20px;
            text-align: center;
            line-height: 160px;
        }
    </style>
</head>

<body>
    <div id="bpp"></div>

    <div id='app'>
        <main id="main"></main>
        <button @click="isShow = true">显示</button>


        <!-- teleport 传送,to 属性指定我们将内容传送到什么地方，该属性是标签的标识，可以是 id 也可以是
            标签名称，建议写 id
            可以传递到组件内容任意位置，也可以传送到组件的外部，或者 app 外部都可以 
        -->
            <!-- <teleport to='#main'> -->
        <teleport to='#bpp'>
            <div class="mask" @click="isShow = false" v-if="isShow">
                <section>
                    广而告之,哈哈哈哈哈哈
                </section>
            </div>
        </teleport>

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                isShow: false
            }
        },
        methods: {},
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>